<div class="fx-row-vert-cent flex-between pl-12 pr-12 h-lg">
  <span class="secondary f-600">Peer Detail</span>
  <span class="mina-icon pointer tertiary primary-hover f-18"
        (click)="closeSidePanel()">close
  </span>
</div>
<div class="h-minus-lg flex-column pb-10">
  <div class="h-minus-lg flex-column">
    <div class="h-lg flex-row pl-12">
      <button class="btn-primary mr-8" (click)="expandEntireJSON()">Expand All</button>
      <button class="btn-primary mr-8" (click)="collapseEntireJSON()">Collapse All</button>
      <button class="btn-primary mr-8" [copyToClipboard]="jsonString">Copy</button>
      <button class="btn-primary" (click)="downloadJson()">Save</button>
    </div>
    <div class="flex-column h-minus-lg overflow-y-scroll">
      <mina-json-viewer [expanded]="false" [json]="activePeer || {}"
                        [expandTracking]="expandingTracking"></mina-json-viewer>
    </div>
  </div>
  <div class="ml-10 mr-10 h-lg">
    <button class="btn-primary w-100 h-lg"
            *ngIf="hasBootstrapStatsEnabled"
            (click)="goToBootstrapStats()">
      <span class="fx-row-full-cent">
        See peer in Bootstrap Stats
        <span class="mina-icon icon-300 f-18 ml-5">north_east</span>
      </span>
    </button>
  </div>
</div>
